<template>
	<el-dialog
		v-if="visible"
		title="个人返水明细"
		:visible="visible"
		width="900px"
		center
		:close-on-click-modal="true"
		:destroy-on-close="true"
		:before-close="handleClose"
		@close="handleClose"
	>
		<div>
			<p
				style="
					font-size: 20px;
					font-weight: bold;
					color: #000000;
					margin-bottom: 20px;
				"
			>
				{{ $t('会员账号信息') }}
			</p>
			<el-table
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="proxyAccountInfo"
				style="width: 100%; margin-bottom: 20px"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					align="center"
					:label="`${$t('common.member_number')}`"
					prop="memberAccount"
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="所属代理"
					prop="proxyAccount"
				>
					<template slot-scope="scope">
						{{ scope.row.parentProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('common.belong_merchant')}`"
					prop="merchantName"
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="accountStatus"
					align="center"
					:label="$t('common.account_status')"
					min-width="100"
				>
					<template slot-scope="scope">
						<span
							v-if="!!scope.row.paymentLockStatus"
							class="deleteRgba"
						>
							{{ $t('common.account_lock_status') }}
							<br />
						</span>
						<span
							v-if="!!scope.row.loginLockStatus"
							class="disableRgba"
						>
							{{ $t('common.login_lock_status') }}
							<br />
						</span>
						<span
							v-if="!!scope.row.gameLockStatus"
							class="lockingRgba"
						>
							{{ $t('common.game_lock_status') }}
						</span>
						<span
							v-if="
								!scope.row.loginLockStatus &&
								!scope.row.gameLockStatus &&
								!scope.row.paymentLockStatus
							"
							class="normalRgba"
						>
							{{ $t('common.account_status_normal') }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					:label="`${$t('common.register_time')}`"
					prop="createdAt"
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 应收返水统计 -->
			<div>
				<MemberBounsSummary
					:detailData="detailData"
				></MemberBounsSummary>
			</div>

			<!-- 个人返水信息 -->
			<div class="mt20">
				<MemberBounsDetail :detailData="detailData"></MemberBounsDetail>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import MemberBounsSummary from '@/components/Funds/MemberBounsSummary'
import MemberBounsDetail from '@/components/Funds/MemberBounsDetail'
export default {
  components: { MemberBounsSummary, MemberBounsDetail },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object,
      required: true
    },
    closeDialog: {
      type: Function,
      default: () => { }
    }
    // 格式:
    // detailData: {
    // 	memberId:'904881243518222354',
    // 	reportDate:'20231126'
    // }
  },
  data() {
    return {
      proxyAccountInfo: []
    }
  },
  mounted() {
    if (this.detailData.memberId) {
      this.getMemberByUserName()
    }
  },
  methods: {
    // 关闭
    handleClose() {
      this.closeDialog(false)
    },
    getMemberByUserName() {
      this.memberLoading = true
      this.$api
        .getOutlineInfo({
          userName: this.detailData.userName,
          merchantId: this.detailData.merchantId
        })
        .then((res) => {
          this.proxyAccountInfo.push(res?.data || {})
          this.memberLoading = false
        })
        .catch(() => {
          this.memberData = {}
          this.memberLoading = false
        })
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && this.headerStyle !== 2) {
        return 'background:#EFEFEF'
      } else {
        return ''
      }
    }
  }
}
</script>
